<template>
  <div class="hello">
    <!-- 操作栏 -->
    <div>
      <button @click="previewFile" class="btn">点击预览插件</button>
    </div>
    <!-- 内容区 -->
    <div ref="fileRef"></div>
  </div>
</template>

<script>
// import mammoth from 'mammoth'
export default {
  name: 'HelloWorld',
  data () {
    return {
      url:
        'http://10.10.20.152:9000/000000-delivery/upload/20220111/a1f3d960bb7558aa095b8bf269eb6eff.docx'
      // 文件地址
    }
  },
  methods: {
    // //随便写写
    // addTest(){

    // },
    previewFile () {
      var mammoth = require('mammoth')
      let self = this
      try {
        var xhr = new XMLHttpRequest()
        xhr.open('GET', this.url)
        xhr.responseType = 'arraybuffer'
        xhr.onload = function () {
          var arrayBuffer = xhr.response // arrayBuffer
          mammoth
            .convertToHtml({ arrayBuffer: arrayBuffer })
            .then(displayResult)
            .done()
          function displayResult (result) {
            self.$refs.fileRef.innerHTML = result.value || ''
          }
        }
        xhr.send()
      } catch (e) {
        console.log(e)
      }
    }
  },
  mounted () {
    // this.previewFile()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btn {
  padding: 6px;
}
</style>
